<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <pageTool>
            <template #header>
              <div @click="addProperty">添加房产</div>
            </template>
            <template #footer>
              <el-select
                v-model="house"
                placeholder="房屋分类"
                @change="searchChange"
              >
                <el-option
                  v-for="item in classifyList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>

              <el-select
                v-model="broker"
                placeholder="全部经纪人"
                @change="searchChange"
              >
                <el-option
                  v-for="item in managersList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <el-input
                v-model="titleContains"
                placeholder="请输入内容"
                style="width:500px"
                @blur="searchChange"
              >
                <el-button slot="append" icon="el-icon-search" />
              </el-input>
            </template>
          </pageTool>
        </div>
        <el-table
          :data="tableData"
          border
        >
          <el-table-column
            prop="image"
            label="封面"
          >
            <template v-slot="{row}">
              <img
                :src="row.image"
                style="width:100%"
                alt=""
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
          />
          <el-table-column
            prop=""
            label="标签"
          >
            <template v-slot="{row}">
              <el-tag
                v-for=" item in row.tags"
                :key="item"
                closable
                type="success"
              >
                {{ item }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
          />
          <el-table-column
            prop="category.title"
            label="分类"
          />
          <el-table-column
            prop="agent.name"
            label="经济"
          />
          <el-table-column
            prop="price"
            label="价格"
          />
          <el-table-column
            prop="desc"
            label="描述"
          />
          <el-table-column
            prop="photos"
            label="图片"
          >
            <template
              v-slot="{row}"
            >
              <div class="photos">
                <img
                  v-for="(item, index) in row.photos"
                  :key="index"
                  :src="item"
                  alt=""
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="180"
          >
            <template v-slot="{row}">
              <el-button type="primary" @click="editProperty(row.id)">编辑</el-button>
              <el-button type="success" @click="delProperty(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          align="center"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageConfig._limit"
          @current-change="handleCurrentChange"
        />
      </el-card>
      <!-- dialog组件 -->
      <el-dialog

        title="添加房产"
        :visible="dialogVisible"
        @close="closeFn"
      >
        <el-form
          ref="dialogForm"
          :rules="rules"
          label-width="80px"
          :model="dialogForm"
        >
          <el-form-item label="经纪">
            <el-select v-model="dialogForm.agent" placeholder="请选择">
              <el-option
                v-for="item in managersList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="dialogForm.category" placeholder="请选择">
              <el-option
                v-for="item in classifyList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="标题" prop="title">

            <el-input v-model="dialogForm.title" />
          </el-form-item>
          <el-form-item label="标签" class="addLabelFa">
            <el-tag
              v-for="(item,index) in dialogForm.tags"
              :key="index"
              closable
              @close="handleClose(index)"
            >{{ item }}</el-tag>
            <el-button
              v-if="addLabel"
              class="addLabel"
              @click="addLabel=false"
            >+ 标签</el-button>
            <el-input
              v-else
              v-model="tag"
              class="aa"
              @blur="inputTags"
            />
          </el-form-item>
          <el-form-item label="地址">
            <el-select placeholder="请选择" value="广东" style="width:30%" />
            <el-input v-model="dialogForm.address" style="width:70%" />
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="dialogForm.price" />
          </el-form-item>

          <el-form-item label="描述">
            <el-input v-model="dialogForm.desc" type="textarea" class="description" />
          </el-form-item>
          <el-form-item label="内容是啥">
            <!-- <el-input v-model="dialogForm.content" /> -->
            <VueEditor v-model="dialogForm.content" />
          </el-form-item>
          <el-form-item label="封面">
            <ImageUpload ref="cover" />
          </el-form-item>
          <el-form-item label="图片">
            <ImageUpload ref="pic" :num="3" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeFn">取 消</el-button>
          <el-button type="primary" @click="ConfirmFn">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getManagersList } from '@/api/managers/index'
import { getClassifyList } from '@/api/classify'
import { getPropertyList, addProperty, delProperty, getPropertyNum,
  getPropertyById, editPropertyById } from '@/api/property'
export default {
  data() {
    return {
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10个字符', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      addLabel: true,
      tag: '',
      tableData: [],
      dialogForm: {
        address: '',
        title: '',
        desc: '',
        image: '',
        agent: '',
        content: '',
        price: '',
        photos: '',
        tags: [],
        category: ''
      },
      managersList: [],
      classifyList: [],
      total: 0,
      currentPage: 1,
      broker: '',
      house: '',
      titleContains: ''
    }
  },
  computed: {
    pageConfig() {
      // 设定每页长度
      const pageSize = 2
      return {
        _limit: pageSize,
        _start: (this.currentPage - 1) * pageSize
      }
    }
  },
  async created() {
    await this.siftList()
    await this.siftClassifyList()
    await this.searchChange()
  },
  methods: {
    async searchChange() {
      const res = await getPropertyList({
        ...this.pageConfig,
        category: this.house || null,
        agent: this.broker || null,
        title_contains: this.titleContains || null
      })
      this.tableData = res.data
      const { data } = await getPropertyNum({
        category: this.house || null,
        agent: this.broker || null,
        title_contains: this.titleContains || null
      })
      this.total = data
    },
    async  handleCurrentChange(newPage) {
      this.currentPage = newPage
      this.searchChange()
    },
    addProperty() {
      this.dialogVisible = true
    },
    // 获取总房产数量
    async  getPropertyNum() {
      const { data } = await getPropertyNum()
      this.total = data
    },
    // 筛选 经纪人 房产
    async siftList() {
      const { data } = await getManagersList()
      const newArr = []
      const obj = {}
      for (let i = 0; i < data.length; i++) {
        if (!obj[data[i].name]) {
          newArr.push(data[i])
          obj[data[i].name] = true
        }
      }
      this.managersList = newArr
    },
    async siftClassifyList() {
      const { data } = await getClassifyList()
      const newArr = []
      const obj = {}
      for (let i = 0; i < data.length; i++) {
        if (!obj[data[i].title]) {
          newArr.push(data[i])
          obj[data[i].title] = true
        }
      }
      this.classifyList = newArr
    },
    inputTags() {
      this.dialogForm.tags.push(this.tag)
      this.tag = ''
      this.addLabel = true
    },
    handleClose(index) {
      this.dialogForm.tags.splice(index, 1)
    },
    async ConfirmFn() {
      await this.formatPicList()
      if (this.dialogForm.id) {
        await editPropertyById(this.dialogForm)
      } else {
        await addProperty(this.dialogForm)
      }
      this.searchChange()
      this.closeFn()
    },
    // 删除
    async delProperty(row) {
      if (this.tableData.length === 1 && this.currentPage !== 1) {
        this.currentPage--
      }
      await delProperty(row.id)
      this.searchChange()
    },
    // 修改
    editProperty(id) {
      this.dialogVisible = true
      getPropertyById(id).then(res => {
        this.dialogForm = res.data
        this.$refs.cover.fileList.push({
          url: res.data.image
        })
        res.data.photos.forEach(item => {
          this.$refs.pic.fileList.push({
            url: item
          })
        })
      }).catch(err => {
        console.log(err)
      })
    },
    closeFn() {
      this.dialogForm = {
        address: '',
        title: '',
        desc: '',
        image: '',
        agent: '',
        content: '',
        price: '',
        photos: '',
        tags: [],
        category: ''
      }
      this.$refs.cover.fileList = []
      this.$refs.pic.fileList = []
      this.$refs.dialogForm.resetFields()
      this.dialogVisible = false
    },
    // 处理上传腾讯云的组件的数组，让传给后端的数组复合上传条件
    formatPicList() {
      this.dialogForm.image = this.$refs.cover.fileList[0].url
      const picList = []
      this.$refs.pic.fileList.forEach(item => {
        picList.push(item.url)
      })
      this.dialogForm.photos = picList
    }
  }
}
</script>
<style scoped>
::v-deep .photos{
display: flex;
flex-direction: column;
height: 100%;
 }
 .addLabel{
  position: absolute;
   padding: 0;
   width: 100px;
   height: 100%;
   z-index: 11;
 }
::v-deep .description .el-textarea__inner{
  height: 100px;
}
::v-deep  .el-dialog__header {
  background: #ffffff;
}
::v-deep .el-dialog__header .el-dialog__title{
  color: black;
  font-size: 25px;
}
.el-form-item__content .aa{
width: 100px;
}
.el-pagination{
margin-top:20px;
}
</style>
